<template>
  <ex-dialog
    width="50%"
    class="ex-diolog"
    title="提现审核"
    :visible="visible"
    @closeDialog="handleClose"
    center
  >
    <el-dialog
      width="30%"
      title="提现审核"
      :visible.sync="innerVisible"
      append-to-body
      center
    >
      <div class="refuseMain">
        <div class="txt">请选择拒绝原因：</div>
        <el-radio-group v-model="radio" @change="change">
          <el-radio :label="1">结算账户信息不正确</el-radio>
          <el-radio :label="2">今日暂不处理</el-radio>
          <el-radio :label="3">其他</el-radio>
        </el-radio-group>
        <el-input
          v-if="radio == 3"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="20"
          show-word-limit
          @blur="changetxt"
        >
        </el-input>
        <div class="buttom">
          <el-button size="medium" @click="innerVisible = false"
            >返回</el-button
          >
          <el-button size="medium" type="primary" @click="confirmRejection"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- <el-dialog
      width="30%"
      title="提现审核"
      :visible.sync="manuaAgree"
      append-to-body
      center
    >
      <div class="refuseMain">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <div class="list">
            <el-form-item label="打款时间：">
              <el-date-picker
                v-model="form.remitDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="打款金额：" prop="remitMoney">
              <el-input
                v-model="form.remitMoney"
                placeholder="请输入打款金额："
              >
              </el-input>
            </el-form-item>
            <el-form-item label="银行交易单号：" prop="serialNo">
              <el-input
                v-model="form.serialNo"
                placeholder="请输入银行交易单号"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-form>
        <div style="height: 120px"></div>
        <div class="buttom">
          <el-button size="medium" @click="manuaAgree = false">返回</el-button>
          <el-button
            size="medium"
            type="primary"
            @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog> -->
    <div class="main">
      <loading v-if="loading" />
      <text-list v-else label-width="200px" :column="1">
        <!-- common info -->
        <text-item label="申请时间：">{{ data.createTime }}</text-item>
        <text-item label="类型：">{{ data.typeDict }}</text-item>
        <text-item label="账号名称：">{{ data.merchantName }}</text-item>
        <text-item label="店铺名称：">{{ data.shopName }}</text-item>
        <text-item label="申请提现金额（¥）：">{{
          data.practicalMoney
        }}</text-item>
        <text-item label="累计提现次数（次）：">{{
          data.withdrawNum
        }}</text-item>
        <text-item label="结算方式：">{{ data.settlementTypeDict }}</text-item>
        <text-item label="结算账户名称：">{{ data.bankAccountName }}</text-item>
        <text-item label="结算卡号：">{{ data.bankNo }}</text-item>
        <text-item label="结算卡所属支行："
          >{{ data.bankName }} - {{ data.bankBranch }}</text-item
        >
      </text-list>
    </div>

    <template slot="footer">
      <el-button type="danger" @click="rejectClick">拒绝</el-button>
      <el-button type="primary" @click="handleManua">已打款，待审核</el-button>
    </template>
  </ex-dialog>
</template>
<script>
// components
import {
  manualDetail,
  manualAgree,
  manualReject,
  manualDetailNew,
  updateAgree,
} from "@/api/moneyManagement";
import Loading from "@/components/Loading/index";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading: false,
      data: {},
      applyDetail: {},
      radio: 1,
      remark: "",
      innerVisible: false,
      manuaAgree: false,
      textarea: "",
      remark: "今日提现太频繁，请明日重试！",
      form: {
        serialNo: "",
        remitMoney: "",
        remitDate: "",
      },
      rules: {
        serialNo: [
          { required: true, message: "请输入银行交易单号", trigger: "blur" },
        ],
        remitMoney: [
          { required: true, message: "请输入打款金额", trigger: "blur" },
        ],
        remitDate: [
          { required: true, message: "请设置打款日期", trigger: "blur" },
        ],
      },
    };
  },
  // computed: {
  //   industryTypeText() {
  //     return this.applyDetail.type
  //       ? this.$getStatusText('industry_type', this.applyDetail.type)
  //       : ''
  //   }
  // },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      console.log(this.id);
      this.loading = true;
      manualDetailNew(this.id)
        .then((res) => {
          console.log("获取详情", res);
          const { result } = res;
          // result.statusText = this.$getStatusText('quality_cert_verify_status', result.status)
          this.data = result;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },

    handleSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
        duration: 1500,
        onClose: () => {
          this.handleClose();
          this.$emit("success");
        },
      });
    },

    rejectClick() {
      this.innerVisible = true;
    },

    confirmRejection() {
      if (this.radio == 3 && this.textarea == "") {
        this.$message.error("请填写拒绝原因");
        return;
      }
      var params = {
        id: this.id,
        remark: this.remark,
      };
      manualReject(params).then((res) => {
        var text = "已拒绝【" + this.data.merchantName + "】提现操作成功";
        this.handleSuccess(text);
      });
    },
    handleManua() {
      console.log(this.id);
      // this.manuaAgree = true;
      this.$confirm("确认已打款?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            id: this.id,
          };
          updateAgree(params)
            .then((res) => {
              const {} = res.result;
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              setTimeout(() => {
                this.$emit("success");
                this.$emit("update:visible", false);
              }, 800);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            id: this.id,
            serialNo: this.form.serialNo,
            remitMoney: this.form.remitMoney,
            remitDate: this.form.remitDate,
          };
          manualAgree(params)
            .then((res) => {
              const {} = res.result;
              this.$message({
                message: "处理成功",
                type: "success",
                duration: 1500,
              });
              this.$emit("success");
              this.$emit("update:visible", false);
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    agreeClick() {
      this.$confirm("是否同意?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          var data = {
            id: this.id,
            serialNo: this.form.serialNo,
          };
          manualAgree(data).then((res) => {
            this.handleSuccess("已同意");
          });
        })
        .catch();
    },
    changetxt(event) {
      console.log(this.textarea);
      this.remark = this.textarea;
    },
    change(e) {
      console.log(e);
      if (e == 1) {
        this.remark = "今日提现太频繁，请明日重试！";
      } else if (e == 2) {
        this.remark = "账户余额不足，请联系平台商户！";
      } else {
        this.remark = this.textarea;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.buttom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 150px;
  margin-top: 30px;
}
.txt {
  font-size: 15px;
  margin-bottom: 20px;
}
.refuseMain {
  ::v-deep .el-radio-group {
    display: flex !important;
    flex-direction: column !important;
  }
  .el-radio {
    margin-bottom: 15px !important;
    margin-left: 20px !important;
  }
  .el-input--medium {
    font-size: 14px;
  }
  .el-textarea {
    width: 90%;
  }
}
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
  }

  .main {
    margin: 0 auto;
  }
  .pic-list {
    display: flex;
    justify-content: space-around;
    width: 660px;
  }
  .img {
    display: block;
    width: 200px;
    height: auto;
  }
}
.list {
  ::v-deep .el-form-item {
    display: flex;
    justify-content: flex-start;
  }
  ::v-deep .el-form-item__label {
    width: 120px;
  }
  ::v-deep .el-form-item__content {
    width: 300px;
  }
}
</style>
